import path from 'path'
import templateCode from './template/template.js'
import blockCode from './block/block.js'
const template = require.context('./template', false, /\.vue$/)
const block = require.context('./block', false, /\.vue$/)
const templateModules = {}
const blockModules = {}
// 组件导入
template.keys().forEach((key) => {
  const name = path.basename(key, '.vue')
  /**
   * path.basename获取vue文件名，也可以用正则表达式匹配
   * key.replace(/^\.\/(.*)\.\w+$/, '$1')
   **/
   templateModules[name] = template(key).default || template(key)
})

block.keys().forEach((key) => {
  const name = path.basename(key, '.vue') 
  /**
   * path.basename获取vue文件名，也可以用正则表达式匹配
   * key.replace(/^\.\/(.*)\.\w+$/, '$1')
   **/
   blockModules[name] = block(key).default || block(key)
})
export default {
  name: 'TestBlock',
  componentName: 'TestBlock',
  components:{
    ...templateModules,
    ...blockModules
  },
  data() {
    return {
      activeName: 'template',
      dialogVisible:false,
      dialogVisibles:false,
      templateModules:templateModules,
      blockModules:blockModules,
      template:Object.keys(templateModules),
      block:Object.keys(blockModules),
      currComponent:null,
      currComponentName:'',
      descTitle:''
    }
  },
  methods: {
    onPreview(item,vdom){
      this.currComponentName = item;
      this.descTitle = vdom.name
      this.currComponent = vdom
      this.dialogVisible = true
    },
    onSourceCode(item,vdom){
      console.log(item,vdom)
      this.currComponentName = item;
      this.descTitle = vdom.name
      this.currComponent = vdom
      this.dialogVisibles = true
    },
    closedialogVisible(done){
      this.dialogVisible = false
      done()
    },
    closedialogVisibles(done){
      this.dialogVisibles = false
      done()
    },
    handleChange(val) {
      console.log(val)
    },
    templateCode(){
      const currComponentName = this.currComponentName
      return templateCode[currComponentName] || ''
    },
    blockCode(){
      const currComponentName = this.currComponentName
      return blockCode[currComponentName] || ''
    },
    tabClick(tab){
      this.activeName = tab.name
    }
  },
  render(h) {
    const _tabsData = {
      props:{
        value:this.activeName
      },
      on:{
        'tab-click':this.tabClick
      }
    }
    return (
      <div class="test-block">
        <el-tabs {..._tabsData}>
          <el-tab-pane label="模板" name="template">
            <div class="block_list">
              {
                this.template.map(item => {
                  return (
                    <div class="card scaffoldCard">
                      <div class="content">
                        <div class="item">
                          <div class="screenshot"><img src={require('../../assets/test-block/template/' + item + '.png')} /></div>
                        </div>
                        <div class="item-info">
                          <div class="item-title">{this.templateModules[item].name}</div>
                          <div class="item-desc">{this.templateModules[item].desc}</div>
                        </div>
                        <div class="item-action">
                          <a href="javascript:void(0)" class="item-button" onClick={this.onPreview.bind(this,item,this.templateModules[item])}>
                            <img src="https://img.alicdn.com/tfs/TB1HY7LBIbpK1RjSZFyXXX_qFXa-201-200.png" />效果预览
                          </a>
                          <a href="javascript:void(0)" class="item-button" onClick={this.onSourceCode.bind(this,item,this.templateModules[item])}>
                            <img src="https://img.alicdn.com/tfs/TB1ePSoJpzqK1RjSZSgXXcpAVXa-201-200.png" />查看源码
                          </a>
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </el-tab-pane>
          <el-tab-pane label="区块" name="block">
            <div class="block_list">
            {
                this.block.map(item => {
                  return (
                    <div class="card scaffoldCard">
                      <div class="content">
                        <div class="item">
                          <div class="screenshot"><img src={require('../../assets/test-block/block/' + item + '.png')} /></div>
                        </div>
                        <div class="item-info">
                          <div class="item-title">{this.blockModules[item].name}</div>
                          <div class="item-desc">{this.blockModules[item].desc}</div>
                        </div>
                        <div class="item-action">
                          <a href="javascript:void(0)" class="item-button" onClick={this.onPreview.bind(this,item,this.blockModules[item])}>
                            <img src="https://img.alicdn.com/tfs/TB1HY7LBIbpK1RjSZFyXXX_qFXa-201-200.png" />
                            效果预览
                          </a>
                          <a href="javascript:void(0)" class="item-button" onClick={this.onSourceCode.bind(this,item,this.blockModules[item])}>
                            <img src="https://img.alicdn.com/tfs/TB1ePSoJpzqK1RjSZSgXXcpAVXa-201-200.png" />
                            查看源码
                          </a>
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-drawer title={this.descTitle} fullscreen={true} visible={this.dialogVisible} before-close={this.closedialogVisible} size="80%">
          {
            h(this.currComponent)
          }
        </el-drawer>

        <el-drawer title={this.descTitle + '-源码'} fullscreen={true} visible={ this.dialogVisibles } size="80%" before-close={this.closedialogVisibles}> 
          <pre>
            <code class="html hljs xml">
              {
                this.activeName == 'template' ? this.templateCode() : this.blockCode()
              }
            </code>
          </pre>
        </el-drawer>
      </div >
    )

  }
}

